<template>
  <div>
    <div style="float: left">
          <el-button type="primary" @click="Update" size="small">上报</el-button>
    </div>

    <!-- {{ dataList }} -->
    <!-- 搜索用输入框 -->
    <!-- {{ obj }} -->
    <!-- 动态绑定obj对象中的province，因为加了监听器watch，当数值改变就会调用一次查询方法page_query() -->
    <div style="float: right">
      <el-input
        size="small"
        v-model="obj.province"
        placeholder="请输入内容"
      ></el-input>
    </div>

    <el-table
      :data="dataList.list"
      size="small"
      style="width: 100% font-size:20px;font-weight:'bold"
    >
      <el-table-column
        fixed="left"
        prop="id"
        label="编号"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="country" label="国家" width="100" align="center">
      </el-table-column>
      <el-table-column prop="province" label="省市区" align="center">
      </el-table-column>
      <el-table-column prop="city" label="市" align="center"> </el-table-column>
      <el-table-column prop="area" label="区" align="center"> </el-table-column>
      <el-table-column prop="confirmed" label="累计确诊" align="center">
      </el-table-column>
      <el-table-column prop="suspected" label="现有疑似" align="center">
        <template v-slot="scope">
          <span
            style="
              color:#ffba00;
              font-size: 20px;
              font-weight: blod;
            "
            >{{ scope.row.suspected }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        style="color: red"
        prop="dead"
        label="累计死亡"
        align="center"
      >
        <template v-slot="scope">
          <span
            style="
              color: rgba(207, 25, 25, 0.863);
              font-size: 20px;
              font-weight: blod;
            "
            >{{ scope.row.dead }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="cure" label="治愈" align="center">
        <template v-slot="scope">
          <span
            style="
              color: rgba(23, 224, 74, 0.938);
              font-size: 20px;
              font-weight: blod;
            "
            >{{ scope.row.cure }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="severe" label="重症" align="center">
      </el-table-column>
      <el-table-column prop="outside" label="境外输入" align="center">
      </el-table-column>
      <el-table-column
        prop="inputTime"
        label="录入时间"
        width="180"
        align="center"
        fixed="right"
      >
        <template v-slot="scope">
          <div>{{ scope.row.inputTime | dateFMT }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :pager-count="11"
      layout="prev, pager, next"
      :total="dataList.total"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change_page"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
// import moment from 'moment';
//
// 辅助函数：帮助我们快速获取状态机中的变量和方法
export default {
  //局部注册 方法名相同时优先使用局部定义
  // 如果全局过滤器和局部过滤器的名称一致时，组件优先采用局部过滤器的转换规则
  // filters:{
  //     dateFMT(str){
  //         return moment(str).format('YYYY-MM-DD');
  //     }
  // },

  computed: {
    //前面是状态机文件名，后面是获取的state数组变量
    ...mapState("dataList", ["dataList"]),
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query(this.obj);
      },
      deep: true,
    },
  },
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.page_query(this.obj);
  },
  methods: {
    //调用dataList中的方法page_query
    ...mapActions("dataList", ["page_query"]),

    change_page(val) {
      //页数同步操作
      this.obj.page = val;
      this.total;
      // console.log(val)
    },

    Update() {
      this.$router.push({
        path: "/data_list/update",
      });
    },
  },
};
</script>